<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/styles.css">
	<link rel="stylesheet" href="xtiper/css/xtiper.css">
	<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="js/swiper.min.js" charset="UTF-8"></script>
	<script src="js/global.js" charset="UTF-8"></script>
	<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
	<script src="/webjars/vue/2.6.10/dist/vue.js"></script>
	<script src="/webjars/axios/0.19.0/dist/axios.min.js"></script>
	<script src="/xtiper/js/xtiper.min.js"></script>
	<title>U袋网</title>
</head>
<body>
<script type="text/javascript">
	$(document).ready(function(){ $('.to-top').toTop({position:false}) });
	$(document).ready(function(){
		var $item_checkboxs = $('.shopcart-form__box tbody input[type="checkbox"]'),
				$check_all = $('.check-all');
		// 全选
		$check_all.on('change', function() {
			$check_all.prop('checked', $(this).prop('checked'));
			$item_checkboxs.prop('checked', $(this).prop('checked'));
		});
		// 点击选择
		$item_checkboxs.on('change', function() {
			var flag = true;
			$item_checkboxs.each(function() {
				if (!$(this).prop('checked')) { flag = false }
			});
			$check_all.prop('checked', flag);
		});

	});
	// 个数限制输入数字
	$('input.val').onlyReg({reg: /[^0-9.]/g});
	// 加减个数
	$('.cart-num__box').on('click', '.sub,.add', function() {
		var value = parseInt($(this).siblings('.val').val());
		if ($(this).hasClass('add')) {
			$(this).siblings('.val').val(Math.min((value += 1),99));
		} else {
			$(this).siblings('.val').val(Math.max((value -= 1),1));
		}
	});
</script>
<div id="vuebox">
	<!-- 顶部tab -->
	<div class="tab-header">
		<div class="inner">
			<div class="pull-left">
				<div class="pull-left">嗨，欢迎来到<span class="cr">U袋网</span></div>
				<a href="agent_level.html">网店代销</a>
				<a href="temp_article/udai_article4.html">帮助中心</a>
			</div>
			<div class="pull-right">
				<a href="login.html"><span class="cr">登录</span></a>
				<a href="login.html?p=register">注册</a>
				<a href="udai_welcome.html">我的U袋</a>
				<a href="udai_order.html">我的订单</a>
				<a href="udai_integral.html">积分平台</a>
			</div>
		</div>
	</div>
	<!-- 顶部标题 -->
	<div class="bgf5 clearfix">
		<div class="top-user">
			<div class="inner">
				<a class="logo" href="index.html"><img src="images/icons/logo.jpg" alt="U袋网" class="cover"></a>
				<div class="title">购物车</div>
			</div>
		</div>
	</div>
	<div class="content clearfix bgf5">
		<section class="user-center inner clearfix">
			<div class="user-content__box clearfix bgf">
				<div class="title">购物车</div>
				<!--action="udai_shopcart_pay.html"-->
				<form  class="shopcart-form__box">
					<table class="table table-bordered">
						<thead>
						<tr>
							<th width="150">
								<label class="checked-label"><input type="checkbox" class="check-all" v-model="fleg" @change="checkAll"><i></i> 全选</label>
							</th>
							<th width="300">商品信息</th>
							<th width="150">单价</th>
							<th width="200">数量</th>
							<th width="200">现价</th>
							<th width="80">操作</th>
						</tr>
						</thead>
						当前选中{{IdList}}
						<tbody ref="table">
						<tr v-for="(item,index) in cartlist">
							<th scope="row">
								<label class="checked-label">														<!-- v-model="IdList"-->
									<input type="checkbox" :value="item.id" v-model="item.check" @change="check(index,item.id)"><i></i>
									<div class="img"><img :src="item.img1" alt="" class="cover"></div>
								</label>
							</th>
							<td>
								<div class="name ep3">{{item.proname}}  {{item.explain}}</div>
								<div class="type c9">颜色分类：{{item.color}}  尺码：{{item.size}}</div>
							</td>
							<td>¥{{item.price}}</td>
							<td>
								<div class="cart-num__box">
									<input type="button" @click="reducenum(index)" class="sub" value="-">
									<input type="text" class="val" v-model="item.num" maxlength="2" disabled oninput = "value=value.replace(/[^\d]/g,'')">
									<input type="button" @click="addnum(index)" class="add" value="+">
								</div>
							</td>
							<td><item class="price">{{(item.price*item.num)}}</item></td>
							<td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
						</tr>
						</tbody>
					</table>
					<div class="user-form-group tags-box shopcart-submit pull-right">
						<button type="button" class="btn" @click="AddOrder()">提交订单</button>
					</div>
					<div class="checkbox shopcart-total">
						<!--							<label><input type="checkbox" class="check-all"><i></i> 全选</label>-->
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)" id="delList" v-if="IdList.length>0"  @click="delList()">删除</a>
						<div class="pull-right">
							<已选商品></已选商品>
							<span>{{IdList.length}}</span>
							件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合计（不含运费）
							<b class="cr">¥<span class="fz24">{{totalprice}}</span></b>
						</div>
					</div>
				</form>
			</div>
		</section>
	</div>
	<!-- 右侧菜单 -->
	<div class="right-nav">
		<ul class="r-with-gotop">
			<li class="r-toolbar-item">
				<a href="udai_welcome.html" class="r-item-hd">
					<i class="iconfont icon-user" data-badge="0"></i>
					<div class="r-tip__box"><span class="r-tip-text">用户中心</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="udai_shopcart.html" class="r-item-hd">
					<i class="iconfont icon-cart"></i>
					<div class="r-tip__box"><span class="r-tip-text">购物车</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="udai_collection.html" class="r-item-hd">
					<i class="iconfont icon-aixin"></i>
					<div class="r-tip__box"><span class="r-tip-text">我的收藏</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="" class="r-item-hd">
					<i class="iconfont icon-liaotian"></i>
					<div class="r-tip__box"><span class="r-tip-text">联系客服</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="issues.html" class="r-item-hd">
					<i class="iconfont icon-liuyan"></i>
					<div class="r-tip__box"><span class="r-tip-text">留言反馈</span></div>
				</a>
			</li>
			<li class="r-toolbar-item to-top">
				<i class="iconfont icon-top"></i>
				<div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
			</li>
		</ul>
	</div>
	<!-- 底部信息 -->
	<div class="footer">
		<div class="footer-tags">
			<div class="tags-box inner">
				<div class="tag-div">
					<img src="images/icons/footer_1.gif" alt="厂家直供">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_2.gif" alt="一件代发">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_3.gif" alt="美工活动支持">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_4.gif" alt="信誉认证">
				</div>
			</div>
		</div>
		<div class="footer-links inner">
			<dl>
				<dt>U袋网</dt>
				<a href="temp_article/udai_article10.html"><dd>企业简介</dd></a>
				<a href="temp_article/udai_article11.html"><dd>加入U袋</dd></a>
				<a href="temp_article/udai_article12.html"><dd>隐私说明</dd></a>
			</dl>
			<dl>
				<dt>服务中心</dt>
				<a href="temp_article/udai_article1.html"><dd>售后服务</dd></a>
				<a href="temp_article/udai_article2.html"><dd>配送服务</dd></a>
				<a href="temp_article/udai_article3.html"><dd>用户协议</dd></a>
				<a href="temp_article/udai_article4.html"><dd>常见问题</dd></a>
			</dl>
			<dl>
				<dt>新手上路</dt>
				<a href="temp_article/udai_article5.html"><dd>如何成为代理商</dd></a>
				<a href="temp_article/udai_article6.html"><dd>代销商上架教程</dd></a>
				<a href="temp_article/udai_article7.html"><dd>分销商常见问题</dd></a>
				<a href="temp_article/udai_article8.html"><dd>付款账户</dd></a>
			</dl>
		</div>
		<div class="copy-box clearfix">
			<ul class="copy-links">
				<a href="agent_level.html"><li>网店代销</li></a>
				<a href="class_room.html"><li>U袋学堂</li></a>
				<a href="udai_about.html"><li>联系我们</li></a>
				<a href="temp_article/udai_article10.html"><li>企业简介</li></a>
				<a href="temp_article/udai_article5.html"><li>新手上路</li></a>
			</ul>
			<!-- 版权 -->
			<p class="copyright">
				© 2005-2017 U袋网 版权所有，并保留所有权利<br>
				ICP备案证书号：闽ICP备16015525号-2&nbsp;&nbsp;&nbsp;&nbsp;福建省宁德市福鼎市南下村小区（锦昌阁）1栋1梯602室&nbsp;&nbsp;&nbsp;&nbsp;Tel: 18650406668&nbsp;&nbsp;&nbsp;&nbsp;E-mail: 18650406668@qq.com
			</p>
		</div>
	</div>
</div>
</body>
</html>
<script type="text/javascript">
	var vm=new Vue({
		el: "#vuebox",
		data: {
			fleg: false,//全选是否
			cartlist: [],//总共的列表
			IdList: [],//选中的
			totalprice: 0, //总假期
			cart: {
				id: null, cartid: null, proid: null, price: null,
				num: null, totalprice: null, userid: null, colorid: null,
				sizeid: null, checkt: null, scrap1: null, scrap2: null, scrap3: null
			}


		},
		mounted() {
			this.queryCart();
		},
		watch: {},
		methods: {
			//单选
			check: function (index, id) {
				if (this.cartlist[index].check == true) {
					this.totalprice = this.totalprice + (this.cartlist[index].price * this.cartlist[index].num);
					this.IdList.push(index);
				} else {
					this.totalprice = this.totalprice - (this.cartlist[index].price * this.cartlist[index].num);
					this.IdList.pop(index);
				}
				if (this.IdList.length == this.cartlist.length) {
					this.fleg = true;
				} else {
					this.fleg = false;
				}
			},
			//选中所有/反选
			checkAll: function () {
				if (this.IdList.length > 0) {
					this.IdList = [];
					this.totalprice = 0;
				}
				if (this.fleg == true) {
					for (var i = 0; i < this.cartlist.length; i++) {
						this.cartlist[i].check = true;
						this.totalprice = this.totalprice + (this.cartlist[i].price * this.cartlist[i].num);
						this.IdList.push(i);
					}
				} else {
					for (var i = 0; i < this.cartlist.length; i++) {
						this.cartlist[i].check = false;
						this.totalprice = this.totalprice - (this.cartlist[i].price * this.cartlist[i].num);
						this.IdList.pop(i);
					}
				}

			},
			//查询总购物车
			queryCart: function () {
				axios({
					url: "/cart/list", method: "get",
					params: {}
				})
						.then(res => {
							this.cartlist = res.data
						});
			},
			//单列删除
			del: function (id) {
				xtip.confirm('确认删除吗？', function () {
					var list = new Array();
					list.push(id);
					axios.post("/cart/del", list)
							.then(res => {
								if (res.data > 0) {
									alert("删除成功!");
									location.replace(location.href);
								}
							});
				});
			},
			//多列删除
			delList: function () {

				var ids = new Array();
				ids = [];

				for (var i = 0; i < this.IdList.length; i++) {
					ids.push(this.cartlist[this.IdList[i]].id);
				}

				xtip.confirm('要删除选中的订单吗?aa？', function () {
					axios.post("/cart/del", ids)
							.then(res => {
								if (res.data > 0) {
									alert("删除成功!");
									location.replace(location.href);
								}
							});
				});
			},
			//减少数量
			reducenum: function (index) {
				if (this.cartlist[index].num > 0) {
					this.cartlist[index].num--;
					if (this.cartlist[index].check == true) {
						this.totalprice = this.totalprice - this.cartlist[index].price;
					}


				}
				if (this.cartlist[index].num == 0) {
					if (this.del(this.cartlist[index].id) == false) {
						this.cartlist[index].num = 1;
					}
				}
			},

			//增加数量
			addnum: function (index) {
				if (this.cartlist[index].num < 99) {
					this.cartlist[index].num++;
					if (this.cartlist[index].check == true) {
						this.totalprice = this.totalprice + this.cartlist[index].price;
					}
				}
			},
			//提交订单
			AddOrder:  function () {
				if (this.IdList.length == 0) {
					alert("请选择商品!");
					return false;
				}
				//定义一个对象集合
				var crlist=new Array();
				for (var i=0;i< this.IdList.length;i++) {
					console.log(this.cartlist[this.IdList[i]]);
					crlist.push(this.cartlist[this.IdList[i]]);
				}
					axios.post("/cart/save",crlist).then(res=>{
						if(res.data.status="yes"){
							alert("提交成功!");
							window.location.href="udai_shopcart_pay.html";
						}else{
							alert("提交失败!请联系管理员");
						}
					})


			}

		}
	})


</script>